﻿<phone:PanoramaItem x:Class="PhoneGuitarTab.UI.Views.PanaromaItems.Bands"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Command="clr-namespace:PhoneCore.Framework.Views.Commands;assembly=PhoneGuitarTab.Core"
                    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                    xmlns:Infrastructure="clr-namespace:PhoneGuitarTab.UI.Infrastructure"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    DataContext="{Binding Collection, Source={StaticResource Locator}}"
                    Header="{Binding Path=LocalizedResources.Panarama_Bands, Source={StaticResource LocalizedStrings}}"
                    mc:Ignorable="d">
    <phone:PanoramaItem.Resources>
        <Infrastructure:GroupToBrushValueConverter x:Key="groupBrush"/>
        <Infrastructure:ImageUrlToUriConverter x:Key="ImageUrlToUriConverter"/>
        <Style x:Key="LongListSelectorJumpListStyle" TargetType="phone:LongListSelector">
            <Setter Property="GridCellSize"  Value="99,99"/>
            <Setter Property="LayoutMode" Value="Grid" />
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border 
                            Margin="6"
                            Background="{Binding Converter={StaticResource groupBrush}}"
                            IsHitTestVisible="{Binding HasItems}">
                            <TextBlock Margin="{StaticResource PhoneTouchTargetOverhang}"
                                   VerticalAlignment="Bottom"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="36"
                                   Foreground="{StaticResource PhoneForegroundBrush}"
                                   Text="{Binding Key}" />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PanoramaItem.Resources>
    <phone:LongListSelector x:Name="GroupList" Margin="{Binding Startup.ListMargin, Source={StaticResource Locator}}"
                              toolkit:TiltEffect.IsTiltEnabled="True"
                              IsGroupingEnabled="True" LayoutMode="Grid" GridCellSize="200,200"
                              HideEmptyGroups="True"                          
                              GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
                              JumpListStyle="{StaticResource LongListSelectorJumpListStyle}"  
                              ItemsSource="{Binding Groups}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
                <Command:ExecuteCommandAction Command="{Binding GoToGroup}" CommandParameter="{Binding ElementName=GroupList}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <phone:LongListSelector.ItemTemplate>   
            <DataTemplate>
                <Grid Margin="10,10,10,10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image VerticalAlignment="Center" HorizontalAlignment="Center" 
                              Stretch="UniformToFill" MaxHeight="200" MaxWidth="200" Opacity="0.1" Source="/Images/applogo.png">
                    </Image>
                    <Image VerticalAlignment="Center" HorizontalAlignment="Center"
                           Stretch="UniformToFill"
                           Visibility="Visible" MaxHeight="200" MaxWidth="200" Opacity="0.75">
                      <Image.Source >
                            <BitmapImage UriSource="{Binding Item2.ExtraLargeImageUrl, Converter={StaticResource ImageUrlToUriConverter}}"  />
                        </Image.Source>
                    </Image>
                    <StackPanel  VerticalAlignment="Bottom" HorizontalAlignment="Left">
                        <TextBlock Margin="5,0,-20,0"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="20"
                                   Foreground="White"
                                   Style="{StaticResource PhoneTextLargeStyle}"
                                    TextWrapping="Wrap"
                                   Text="{Binding Item2.Name}" />
                        <TextBlock Margin="5,0,0,19"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="14"
                                   Foreground="White"
                                   Style="{StaticResource PhoneTextNormalStyle}">
                            <Run Text="{Binding Path=LocalizedResources.Bands_Tabs, Source={StaticResource LocalizedStrings}}" />
                            <Run Text="{Binding Item1}" />
                        </TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
</phone:PanoramaItem>